<template>
  <span class="MRadio" @click="change()">
    <div :class="['border',checked?'border-actived':'']">
      <transition name="trans">
        <div class="chosen" v-show="checked"></div>
      </transition>
    </div>
    <slot></slot>
    <input :name="inputname" :value="value" :checked="checked" type="radio" />
  </span>
</template>

<style lang="less" scoped>
    @import "~core/basic.less";

    .MRadio {
      display: inline-block;
      cursor: pointer;

      .noselect();
    }

    .border {
      margin-right: @gird;
      display: inline-block;
      width: 2*@gird;
      height: 2*@gird;
      border: 2px solid @color;
      border-radius: 2*@gird;
      vertical-align: middle;
      text-align: center;

      transition: all 500ms @ease-strong;
    }

    .border-actived {
      background: @color;
      
    }

    .chosen {
      width: @gird;
      height: @gird;
      background: @white;
      border-radius: @gird;
      margin-left: @gird/2;
      margin-top: @gird/2;
    }

    input {
      display: none;
    }

    .trans-enter-active, .trans-leave-active {
      transition: all 500ms;
      transform: scale(1,1);
      transition-timing-function: @ease-normal;
    }
    .trans-enter, .trans-leave-active {
      transform: scale(2,2);
    }
</style>

<script>
  export default {
    data(){
      return {
        inputname:'',
        checked:false
      }
    },
    props:{
      name:String,
      value:String
    },
    mounted(){
      if(!this.$parent.name || this.$parent.$el._prevClass!="MGroup"){
        throw new Error("MRadio need to inside MGroup component witch should have a property of name.");
        return;
      }
      this.inputname = this.$parent.name;
  
      this.regevent();
    },
    methods:{
      change(){
        this.$parent.data = this.value;
      },
      regevent(){
        var vm = this;
        var center = this.$parent

        if(!center){
          this.$nextTick(function(){
            vm.regevent();
          })
        }else{
          this.event(center);
        }
      },
      event(center){
        var vm = this;
        center.$on("change",function(val){
          if(vm.value==val){
            vm.checked = true;
          }else{
            vm.checked = false;
          }
        });
      }
    }
  }
</script>